// 引入Vue
import Vue from 'vue'
// 引入路由
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

// 使用路由
Vue.use(VueRouter)

// 配置路由表
const routes = [
  {
    // path 页面跳转组件用的路径 必须配置
    //  / 根目录 表示localhost:xxxx/ 默认显示该组件
    path: '/',
    // 给组件起了个名字
    name: 'home',
    // 组件的路径
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path: '/vue',
    name: 'vue',
    component: () => import(/* webpackChunkName: "about" */ '../views/01vue声明方式/01vue声明式渲染.vue')

  },
  {
    path: '/model',
    name: 'model',
    component: () => import(/* webpackChunkName: "about" */ '../views/02vue指令/01v-model.vue')
  },
  {
    path: '/model-02',
    name: 'model-02',
    component: () => import(/* webpackChunkName: "about" */ '../views/02vue指令/02demo.vue')
  },
  {
    path: '/model-03',
    name: 'model-03',
    component: () => import(/* webpackChunkName: "about" */ '../views/02vue指令/03v-html和v-text.vue')
  },
  {
    path: '/model-04',
    name: 'model-04',
    component: () => import(/* webpackChunkName: "about" */ '../views/02vue指令/04v-show和v-if.vue')
  },
  {
    path: '/model-05',
    name: 'model-05',
    component: () => import(/* webpackChunkName: "about" */ '../views/02vue指令/05v-for.vue')
  },
  {
    path: '/on',
    name: 'on',
    component: () => import(/* webpackChunkName: "about" */ '../views/03事件/01v-on.vue')
  },
  {
    path: '/bind',
    name: 'bind',
    component: () => import(/* webpackChunkName: "about" */ '../views/04属性/v-bind.vue')
  },
  {
    path: '/bind-demo',
    name: 'bind-demo',
    component: () => import(/* webpackChunkName: "about" */ '../views/04属性/02demo.vue')
  },
  {
    path: '/bind-tab',
    name: 'bind-tab',
    component: () => import(/* webpackChunkName: "about" */ '../views/04属性/tab.vue')
  },
  {
    path: '/filter',
    name: 'filter',
    component: () => import(/* webpackChunkName: "about" */ '../views/05过滤器/01过滤器.vue')
  },
  {
    path: '/time',
    name: 'time',
    component: () => import(/* webpackChunkName: "about" */ '../views/05过滤器/02时间戳.vue')
  },
  {
    path: '/life',
    name: 'life',
    component: () => import(/* webpackChunkName: "about" */ '../views/06生命周期/01生命周期.vue')
  },
  {
    path: '/computed',
    name: 'computed',
    component: () => import(/* webpackChunkName: "about" */ '../views/07计算属性/01computed.vue')
  },
  {
    path: '/computed-demo',
    name: 'computed-demo',
    component: () => import(/* webpackChunkName: "about" */ '../views/07计算属性/demo.vue')
  },
  {
    path: '/getset',
    name: 'getset',
    component: () => import(/* webpackChunkName: "about" */ '../views/07计算属性/02计算属性的set和get.vue')
  },
  {
    path: '/watch',
    name: 'watch',
    component: () => import(/* webpackChunkName: "about" */ '../views/08监听属性/01watch.vue')
  },
  {
    path: '/watch-demo',
    name: 'watch-demo',
    component: () => import(/* webpackChunkName: "about" */ '../views/08监听属性/02shop.vue')
  },
  {
    path: '/watch2',
    name: 'watch2',
    component: () => import(/* webpackChunkName: "about" */ '../views/08监听属性/03watch2.vue')
  },
  {
    path: '/diff',
    name: 'diff',
    component: () => import(/* webpackChunkName: "about" */ '../views/08监听属性/04watch和computed的区别.vue')
  },
  {
    path: '/watch-arr',
    name: 'watch-arr',
    component: () => import(/* webpackChunkName: "about" */ '../views/08监听属性/05watch监听数组.vue')
  },
  {
    path: '/globalCom',
    name: 'globalCom',
    component: () => import(/* webpackChunkName: "about" */ '../views/09组件/01全局组件.vue')
  },
  {
    path: '/localCom',
    name: 'localCom',
    component: () => import(/* webpackChunkName: "about" */ '../views/09组件/02局部组件.vue')
  },
  {
    path: '/FandSCom',
    name: 'FandSCom',
    component: () => import(/* webpackChunkName: "about" */ '../views/09组件/03父子传参/father.vue')
  },
  {
    path: '/grandpa',
    name: 'grandpa',
    component: () => import(/* webpackChunkName: "about" */ '../views/09组件/04爷传孙/grandpa.vue')
  },
  {
    path: '/router',
    name: 'router',
    component: () => import(/* webpackChunkName: "about" */ '../views/10路由跳转传参/01路由跳转传参.vue')
  },
  {
    path: '/slot',
    name: 'slot',
    component: () => import(/* webpackChunkName: "about" */ '../views/11插槽/slot.vue')
  },
  {
    path: '/vuex',
    name: 'vuex',
    component: () => import(/* webpackChunkName: "about" */ '../views/12vuex/vuex.vue')
  },
  {
    path: '/vuexFn',
    name: 'vuexFn',
    component: () => import(/* webpackChunkName: "about" */ '../views/12vuex/vuex的四个辅助函数.vue')
  },
  {
    path: '/directive',
    name: 'directive',
    component: () => import(/* webpackChunkName: "about" */ '../views/13自定义指令/01自定义指令.vue')
  },
  {
    path: '/mixin',
    name: 'mixin',
    component: () => import(/* webpackChunkName: "about" */ '../views/14混入/01混入.vue')
  }
]

// 创建路由实例
const router = new VueRouter({
  // 路由模式 hash history
  // hash带#影响美观
  // history不带#,有概率刷新404,需要后端支持
  mode: 'history',
  // 配置地址前缀
  base: process.env.BASE_URL,
  // 将路由信息进行引入使用
  routes
})
// 导出路由 方便在main.js中引入使用
export default router
